<template>
  <div v-loading="loading" :class="className" :style="{height:height,width:width}" />
</template>

<script>
  import * as echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from './mixins/resize'
  import { getCharts } from '@/api/fund/fundBase'
  // import { moneyFormat } from '@/utils/ruoyi'
  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '320px'
      },
      quarter: {
        type: Array,
        default: null,
        desc: '季节'
      },
      fundId: {
        type: String,
        default: undefined
      }
    },
    data() {
      return {
        chart: null,
        loading: false,
        isZoom: false,
        chartData: [],
        chartResult: false
      }
    },
    watch: {
      quarter: {
        handler(val) {
            if (val && val.length !== 0) {
                this.getList()
            }
        },
        deep: true,
        immediate: true
      }
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    mounted() {
      if (this.$route.query.id) {
        this.getList()
      }
    },
    methods: {
      getList() {
        this.chartData = []
        this.loading = true
        var fundId = this.$route.query.id || this.fundId
        getCharts(fundId, 'trace', {
          startDate: this.quarter[0],
          endDate: this.quarter[1]
        }).then(res => {
          var quarter = []
          var sumArr = []
          var sumAmount = 0
          res.data.forEach(item => {
            if (item.type === 'fgz' || item.type === 'lgz') {
              sumAmount = item.value
              sumArr.push(sumAmount)
              quarter.push(item.startDate)
            }
            if (item.type === '+') {
              sumAmount += item.value
              sumArr.push(sumAmount)
            }
            if (item.type === '-') {
              sumAmount -= item.value
              sumArr.push(sumAmount)
            }
          })

          // 根据合计值获取渲染图表数据
          var chartData = this.getChartData(sumArr)

          this.chartData.push(chartData.totalData)
          this.chartData.push(chartData.positive)
          this.chartData.push(chartData.negative)
          this.chartResult = res.data

          if (!this.quarter || this.quarter.length === 0) {
            this.$parent.quarter = quarter
            this.$parent.$parent.$parent.quarter = quarter
          }
          if (!this.chartData || this.chartData.length <= 0) {
            this.$parent.valuationShow = false
            this.$parent.$parent.$parent.valuationShow = false
          } else {
            this.$parent.valuationShow = true
            this.$parent.$parent.$parent.valuationShow = true
          }

          this.initChart()
          this.loading = false
        })
      },
      getChartData(originData) {
        const diffData = [originData[0]] // 计算出相临周期的差值
        originData.forEach((item, inx) => {
          if (inx !== originData.length - 1) {
            diffData.push(originData[inx + 1] - item)
          }
        })
        const totalData = [] // 总数据
        const positive = [] // 正数区域
        const negative = [] // 负数区域
        diffData.forEach((dItem, dInx) => {
          if (dItem > 0) {
            totalData.push(originData[dInx] - dItem)
            positive.push(dItem)
            negative.push('-')
          } else {
            totalData.push(originData[dInx])
            positive.push('-')
            negative.push(Math.abs(dItem))
          }
        })

        // 处理估值数据
        totalData[totalData.length - 1] = 0
        positive[totalData.length - 1] = originData[originData.length - 1]
        negative[totalData.length - 1] = '-'
        return { totalData, positive, negative }
      },
      initChart() {
        this.chart = echarts.init(this.$el, 'light', { renderer: 'svg', useDirtyRect: false })
        var that = this
        var chartConfig = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              lineStyle: {
                color: 'rgba(0,0,0,.1)'
              }
            },
            textStyle: {
              fontSize: '13px'
            },
            formatter: function(params) {
              let tar
              if (params[1].value !== '-') {
                tar = params[1]
              } else {
                tar = params[2]
              }
              return tar.name + ' : ' + that.moneyFormat(tar.value, 'w', 2)
            }
          },
          grid: {
            top: '10%',
            left: '2%',
            right: '2%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(0,0,0,.06)'
              }
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                fontSize: 13,
                color: 'rgba(0,0,0,.54)'
              }
            },
            data: this.chartResult.map(item => {
              return item.nodeName
            })
          },
          yAxis: {
            type: 'value',
            name: `单位：${that.$t('金额单位')}`,
            nameTextStyle: {
              color: '#999',
              fontSize: '13px'
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#F2F3F3'],
                width: 1,
                type: 'dashed',
                opacity: 1
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(0,0,0,.06)'
              }
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                fontSize: 13,
                color: 'rgba(0,0,0,.54)'
              },
              formatter: function(value) {
                return that.moneyFormat(value, 'w', 2)
              }
            }
          },
          color: ['#434EB8', '#5F69E4', '#509AFD', '#71D5F8', '#14C8C7', '#FDB92C', '#FF8643', '#DB5A52'],
          series: [
            {
              name: '',
              type: 'bar',
              stack: '1',
              barWidth: 12,
              itemStyle: {
                borderColor: 'transparent',
                color: 'transparent',
                barBorderRadius: [10, 10, 0, 0]
              },
              color: ['#193bf5'],
              emphasis: {
                itemStyle: {
                  borderColor: 'transparent',
                  color: 'transparent'
                }
              },
              data: this.chartData[0]
            },
            {
              name: '',
              type: 'bar',
              stack: '1',
              barWidth: 12,
              label: {
                show: true,
                position: 'top',
                color: '#141319',
                fontSize: '13px',
                formatter(e) {
                  if (e.value !== 0) {
                    return that.moneyFormat(e.value, 'w', 2)
                  } else {
                    return e.value
                  }
                }
              },
              color: ['#193bf5'],
              itemStyle: {
                barBorderRadius: [3, 3, 3, 3]
              },
              // data: [900, 345, 393, '-', '-', 135, 178, 286, '-']
              data: this.chartData[1]
            },
            {
              name: '',
              type: 'bar',
              stack: '1',
              barWidth: 12,
              label: {
                show: true,
                color: '#141319',
                position: 'bottom',
                fontSize: '13px',
                formatter(e) {
                  if (e.value !== 0) {
                    return that.moneyFormat(e.value, 'w', 2)
                  } else {
                    return e.value
                  }
                }
              },
              itemStyle: {
                barBorderRadius: [3, 3, 3, 3]
              },
              color: ['#53b642'],
              data: this.chartData[2]
            }
          ]
        }
        this.chart.setOption(chartConfig, true)
      }
    }
  }
  </script>
